<template>
  <div>
    <h2>
      <slot name="title" />
    </h2>
    <el-form>
      <el-form-item v-if="carouselTitle <= 1000" label="更多精彩瞬间-链接">
        <el-input
          v-model="model.moreWonderful"
          size="mini"
          style="width:600px"
        />
      </el-form-item>
      <el-button
        v-if="carouselTitle <= 1000"
        size="mini"
        type="primary"
        @click="handleEdit(id)"
      >确定修改</el-button>
      <hr style="border-top:0">
      <h3>轮播视频设置</h3>
      <el-button
        type="primary"
        size="mini"
        @click="openAdd"
      >点击上传视频文件</el-button>
      <br><br>
      <el-table :data="videoBannerList" border stripe size="mini">
        <el-table-column align="center" label="视频链接" prop="carouselUrl" />
        <el-table-column align="center" label="视频封面" width="100px">
          <template slot-scope="scope">
            <el-image
              style="width: 75px; height: 50px"
              :src="scope.row.redirectUrl"
              :preview-src-list="[scope.row.redirectUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不了"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该文件吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <h3>轮播图片设置</h3>

      <el-button
        size="mini"
        type="primary"
        style="margin-bottom:10px"
        @click="openAddPic"
      >点击上传轮播图</el-button>
      <el-table :data="picBannerList" border stripe size="mini">
        <el-table-column align="center" label="图片链接">
          <template slot-scope="scope">
            <el-image
              style="width: 75px; height: 50px"
              :src="scope.row.carouselUrl"
              :preview-src-list="[scope.row.carouselUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不了"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该视频吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog
      title=""
      :visible.sync="addPicVisible"
      width="600px"
      :close-on-click-modal="false"
      :modal="false"
    >
      <div class="img-box">
        <el-image :src="pic" style="width: 150px; height: 100px" fit="cover" />
        <simpleCropper :ratio="1.5" :img.sync="pic">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
          >点击上传海报</el-button>
        </simpleCropper>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="addPicVisible = false">取 消</el-button>
        <!-- 2是添加海报轮播图 -->
        <el-button
          size="mini"
          type="primary"
          @click="handleSubmit(2)"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="上传视频文件"
      :visible.sync="addVideoVisible"
      :close-on-click-modal="false"
      width="600px"
      :modal="false"
    >
      <el-form label-width="140px">
        <el-form-item label="添加视频文件">
          <input
            type="file"
            accept="video/*"
            @change="uploadingVideo($event)"
          >
        </el-form-item>
        <el-form-item label="视频对应的封面图片">
          <div class="img-box">
            <el-image
              :src="poster"
              style="width: 150px; height: 100px"
              fit="cover"
            />
            <simpleCropper :ratio="0" :img.sync="poster">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              >点击上传封面</el-button>
            </simpleCropper>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="mini"
          @click="addVideoVisible = false"
        >取 消</el-button>
        <!-- 1是添加视频轮播图 -->
        <el-button
          size="mini"
          type="primary"
          @click="handleSubmit(1)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*
  id-> 2:武汉揭幕站   3:100场盛典  4:奖项榜单  5:年度总决赛
  图片的carouselTitle是 id * 100 + 1
  视频是carouselTitle是 id * 100
*/
import simpleCropper from '@/components/SimpleCropper'
export default {
  components: {
    simpleCropper
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 添加视频的 visible
      addVideoVisible: false,
      addPicVisible: false,
      video: '',
      poster: '',
      pic: '',
      model: {
        id: '',
        moreWonderful: ''
      },

      videoBannerList: [],
      picBannerList: []
    }
  },
  computed: {
    carouselTitle() {
      return this.id * 100
    }
  },
  watch: {
    id() {
      this.getBannerList()
    }
  },
  mounted() {
    this.getInfo()
    this.getBannerList()
  },
  methods: {
    async getInfo() {
      const { data } = await this.$http.getInformationData({ id: this.id })
      this.model = data.list[0]
    },
    openAdd() {
      this.addVideoVisible = true
    },
    openAddPic() {
      this.addPicVisible = true
    },
    async handleEdit() {
      await this.$http.setInformationData({
        id: this.model.id,
        moreWonderful: this.model.moreWonderful
      })
      this.$message.success('修改成功')
    },
    async uploadingVideo(e) {
      const loading = this.$loading({
        lock: true,
        text: '正在上传，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('file', e.target.files[0])
      this.$http
        .cutUpload({ formData })
        .then(res => {
          loading.close()
          this.video = res.file
          this.$message.success('上传视频成功，请继续上传封面')
        })
        .catch(() => {
          loading.close()
        })
    },
    async handleSubmit(type) {
      if (type === 1) {
        // 1视频轮播图
        if (this.video === '') {
          return this.$message.warning('请选择文件上传视频')
        }
        await this.$http.addInformationBanner({
          carouselUrl: this.video,
          redirectUrl: this.poster,
          carouselTitle: this.carouselTitle
        })
        this.addVideoVisible = false
      } else if (type === 2) {
        if (this.pic === '') {
          return this.$message.warning('请选择轮播图片再上传')
        }
        await this.$http.addInformationBanner({
          carouselUrl: this.pic,
          carouselTitle: this.carouselTitle + 1
        })
        this.addPicVisible = false
      }
      this.$message.success('添加成功')
      this.video = ''
      this.poster = ''
      this.pic = ''
      this.getBannerList()
    },
    async getBannerList() {
      const { data } = await this.$http.getInformationBanner({
        carouselTitle: this.carouselTitle
      })
      this.videoBannerList = data.list
      const { data: pic } = await this.$http.getInformationBanner({
        carouselTitle: this.carouselTitle + 1
      })
      this.picBannerList = pic.list
    },
    async handleDelete(id) {
      await this.$http.deleteInformationBanner({ id })
      this.$message.success('删除成功')
      this.getBannerList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
